<!-- src/views/home/components/WhrBaseCard WhrBaseCard.vue 2023/5/24  @wanghaoran -->
<template>
  <div class="whr-base-card">
    <div class="flex-col">
      <slot name="header">
        <div class="flex-row flex-row-items-between flex-col-end title-height">
          <main-title :main-title="mainTitle"></main-title>
          <slot name="subTitle">
            <div class="whr-base-card-sub-title pointer" @click="onClickSubTitleHandler">{{ subTitle }}</div>
          </slot>
        </div>
      </slot>
      <div class="flex-1 relative flex-col margin-15" :class="contentStyle?contentStyle:''" style="">
        <slot name="content"></slot>
      </div>
    </div>
  </div>

</template>

<script setup>
import MainTitle from "../MainTitle/mainTitle.vue";

defineProps({
  mainTitle: {
    type: String,
    default: ""
  },
  subTitle: {
    type: String,
    default: ""
  },
  // 内容区域自定义样式
  contentStyle: {
    type: String,
    default: ""
  }
})
const emit = defineEmits(['onSubTitleClick'])
const onClickSubTitleHandler = ($event) => {
  emit('onSubTitleClick', $event)
}
</script>

<style scoped>
@import "../assets/css/index.css";

.whr-base-card {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #fff;
  padding: 13px;
  font-size: 14px;
  color: #5D5D5D;
}

.title-height {
  height: 22px;
}

.whr-base-card-main-title {
  font-size: 16px;
  color: #292929;
  letter-spacing: 0;
  position: relative;
  margin-left: 15px;
}

.whr-base-card-main-title::before {
  content: '';
  display: block;
  width: 5px;
  height: 15px;
  border-radius: 3px;
  background: #477CFB;
  position: absolute;
  top: 0;
  left: -15px;
  bottom: 0;
  line-height: 22px;
  margin: auto;
}

.whr-base-card-content-default-font {
  font-size: 12px;
  color: #5D5D5D;
}
</style>